<template>
  <div>
    <button @click="destory">销毁</button>
    <button @click="update">更新</button>
  <div id="A4" class="temperature-chart"></div>
  </div>
</template>
<script>
import {TemperatureChart} from "@/api/system/temperatureChart";
export default {
  name: 'PatientTemperatureChart',
  data() {
    return {
      dataFlag: false,
      originData1: {
        /* ↓ 标题 */
        title: '患者1体温单',
        /* ↓ 基本信息，注：宽度超出一行会自动换 */
        baseInfo: [
          { label: '姓名', value: '张三' },
          { label: '年龄', value: '25' },
          { label: '科别', value: '骨科' },
          { label: '床号', value: '001' },
          { label: '住院病历号', value: '123456' },
          { label: '入院日期', value: '2021-12-01' }
        ],
        /*  ↓ 头部表格数据,
            注：数组中每一个元素表示一行；
            tableHeadData[0]['日期'][0]是第一天日期，
            当天的 00:00:00 x轴的原点 */
        tableHeadData: [
          { '日期': ['2021-12-01', '2021-12-02', '2021-12-03', '2021-12-04', '2021-12-05', '2021-12-06', '2021-12-07'] },
          { '住院日数': ['1', '2', '3', '4', '5', '6', '7'] },
          { '手术或产后日数': ['', '', '', 'Ⅱ-0', 'Ⅱ-1', 'Ⅳ-0', 'Ⅳ-1'] }
        ],
        /* ↓ 底部表格数据，注：数组中每一个元素表示一行 */
        tableFootData: [
          { '呼吸(次/分)': [
              [20,30,20,30,30,20],
              ['',30,20,30,30,20],
              ['',30,'',30,30,20],
              [20,'','','','',20],
              ['','','','','',''],
              ['','','','','',25],
              ['','','','','','']
            ]},
          { '血压(mmHg)': [
              ['138/87', '138/87'],
              ['138/87', '138/87'],
              ['', '138/87'],
              ['138/87', '138/87'],
              ['138/87', ''],
              ['138/87', '138/87'],
              ['138/87', '138/87']
            ] },
          { '总入液量(ml)': ['', '', '', '', '', '', ''] },
          { '大便(次)': ['', '', '', '', '', '', ''] },
          { '尿量(ml)': ['', '', '', '', '', '', ''] },
          { '其它排出量': ['', '', '', '', '', '', ''] },
          { '体重(kg)': ['', '', '', '', '', '', ''] },
          { '皮试': ['', '', '', '', '', '', ''] },
          { '血糖(mmol/L)': [[1,2,3], [1,2,3], [1,2,3], [1,2,3], [1,2,3], [1,2,3], [1,2,3]] },
          { '其它': ['', '', '', '', '', '', ''] }
        ],
        /* ↓ 口表温度数据，每个元素表示数据点的 [x,y] */
        mouthTemperature: [
          ['2021-12-01 04:00:01',36.2],
          ['2021-12-02 00:00:00',36.5],
          ['2021-12-03 12:00:00',36.3],
          ['2021-12-04 16:00:00',37.1],
          ['2021-12-05 20:00:00',37],
          ['2021-12-06 23:59:59',37.2],
          ['2021-12-07 16:00:00',36.5]
        ],
        /* ↓ 腋表温度数据，每个元素表示数据点的 [x,y] */
        armpitTemperature: [
          ['2021-12-01 16:00:00',38.2],
          ['2021-12-02 16:00:00',38],
          ['2021-12-03 16:00:00',37.8],
          ['2021-12-04 16:00:00',37.6],
          ['2021-12-05 16:00:00',37.4],
          ['2021-12-06 16:00:00',37.9],
          ['2021-12-07 16:00:00',36.5]
        ],
        /* ↓ 肛表温度数据，每个元素表示数据点的 [x,y] */
        anusTemperature: [
          ['2021-12-01 04:00:00',37.1],
          ['2021-12-02 08:00:00',37.4],
          ['2021-12-03 12:00:00',37.3],
          ['2021-12-04 16:00:00',38.2],
          ['2021-12-05 20:00:00',38.4],
          ['2021-12-06 24:00:00',38.1],
          ['2021-12-07 16:00:00',40]
        ],
        /* ↓ 脉搏数据，每个元素表示数据点的 [x,y]*/
        pulseFrequency: [
          ['2021-12-01 08:00:00',140],
          ['2021-12-02 08:00:00',120],
          ['2021-12-03 08:00:00',114],
          ['2021-12-04 08:00:00',114],
          ['2021-12-05 08:00:00',120],
          ['2021-12-06 08:00:00',128],
          ['2021-12-07 16:00:00',140]
        ],
        /* ↓ 心率数据，每个元素表示数据点的 [x,y] */
        heartFrequency: [
          ['2021-12-01 08:00:00',110],
          ['2021-12-02 08:00:00',130],
          ['2021-12-03 08:00:00',120],
          ['2021-12-04 08:00:00',110],
          ['2021-12-05 08:00:00',110],
          ['2021-12-06 08:00:00',118],
          ['2021-12-07 16:00:00',140]
        ],
        /* ↓ 其它文字注释，[x轴对应时间, 文字内容] */
        textRemarks: [
          ['2021-12-01 08:00:00', '手术入院—八时零分'],
          ['2021-12-02 08:00:00', '手术'],
          ['2021-12-06 08:00:00', '分娩'],
          ['2021-12-06 12:00:00', '手术'],
          ['2021-12-06 16:12:00', '手术分娩—十六时十二分']
        ]
      },
      originData2: {
        title: '患者2体温单',
        baseInfo: [
          { label: '姓名', value: '李四' },
          { label: '年龄', value: '24' },
          { label: '科别', value: '内科' },
          { label: '床号', value: '002' },
          { label: '住院病历号', value: '123457' },
          { label: '入院日期', value: '2021-12-01' }
        ],
        tableHeadData: [
          { '日期': ['2021-12-01', '2021-12-02', '2021-12-03', '2021-12-04', '2021-12-05', '2021-12-06', '2021-12-07'] },
          { '住院日数': ['1', '2', '3', '4', '5', '6', '7'] },
          { '手术或产后日数': ['', '', '', '', '', '', ''] }
        ],
        tableFootData: [
          { '呼吸(次/分)': [
              ['',30,20,30,30,20],
              ['',30,'',30,30,20],
              [20,'','','','',20],
              ['','','','','',''],
              ['','','','','',''],
              [20,30,20,30,30,20],
              ['','','','','',25]
            ]},
          { '血压(mmHg)': [
              ['138/87', '138/87'],
              ['', '138/87'],
              ['138/87', '138/87'],
              ['138/87', ''],
              ['138/87', '138/87'],
              ['138/87', '138/87'],
              ['138/87', '138/87']
            ] },
          { '总入液量(ml)': ['', '', '', '', '', '', ''] },
          { '大便(次)': ['1', '2', '2', '3', '1', '2', '2'] },
          { '尿量(ml)': ['', '', '', '', '', '', ''] },
          { '其它排出量': ['', '', '', '', '', '', ''] },
          { '体重(kg)': ['', '', '', '', '', '', ''] },
          { '皮试': ['', '', '', '', '', '', ''] },
          { '血糖(mmol/L)': ['', '', '', '', '', '', ''] },
          { '其它': ['', '', '', '', '', '', ''] }
        ],
        mouthTemperature: [
          ['2021-12-01 04:00:01',36.1],
          ['2021-12-02 00:00:00',36.3],
          ['2021-12-03 12:00:00',36.5],
          ['2021-12-04 16:00:00',37.1],
          ['2021-12-05 20:00:00',37],
          ['2021-12-06 23:59:59',37.9],
          ['2021-12-07 24:00:00',36.2]
        ],
        armpitTemperature: [
          ['2021-12-01 16:00:00',38.1],
          ['2021-12-02 16:00:00',38],
          ['2021-12-03 16:00:00',37.5],
          ['2021-12-04 16:00:00',37.8],
          ['2021-12-05 16:00:00',37.4],
          ['2021-12-06 16:00:00',37.8],
          ['2021-12-07 16:00:00',36.7]
        ],
        anusTemperature: [
          ['2021-12-01 04:00:00',37.4],
          ['2021-12-02 08:00:00',37.1],
          ['2021-12-03 12:00:00',37.2],
          ['2021-12-04 16:00:00',38.3],
          ['2021-12-05 20:00:00',38.1],
          ['2021-12-06 24:00:00',38.4],
          ['2021-12-07 16:00:00',40]
        ],
        pulseFrequency: [
          ['2021-12-01 08:00:00',130],
          ['2021-12-02 08:00:00',140],
          ['2021-12-03 08:00:00',124],
          ['2021-12-04 08:00:00',124],
          ['2021-12-05 08:00:00',110],
          ['2021-12-06 08:00:00',118],
          ['2021-12-07 16:00:00',140]
        ],
        heartFrequency: [
          ['2021-12-01 08:00:00',110],
          ['2021-12-02 08:00:00',130],
          ['2021-12-03 08:00:00',120],
          ['2021-12-04 08:00:00',110],
          ['2021-12-05 08:00:00',110],
          ['2021-12-06 08:00:00',118],
          ['2021-12-07 16:00:00',140]
        ],
        textRemarks: [
          ['2021-12-01 08:00:00', '手术入院—八时零分'],
          ['2021-12-02 08:00:00', '手术'],
          ['2021-12-06 08:00:00', '分娩'],
          ['2021-12-06 12:00:00', '手术'],
          ['2021-12-06 16:12:00', '手术分娩—十六时十二分']
        ]
      },
      chart: null
    };
  },
  mounted() {
    this.chart = new TemperatureChart(document.getElementById('A4'), this.originData1);
  },
  methods: {
    destory() {
      if (this.chart) {
        this.chart.destory();
        this.chart = null;
      }
    },
    update() {
      this.dataFlag = !this.dataFlag;
      this.chart.update(this.dataFlag ? this.originData1 : this.originData2);
    }
  }
};
</script>

<style >
* {
  box-sizing: border-box;
}
#A4 {
  width: 210mm;
  height: 297mm;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
}
.container {
  width: 724px; /* 720px = 48 * 15 + 4 */
  height: 281mm;
  background-color: #fff;
}
.title {
  text-align: center;
  font-size: 26px;
  margin-bottom: 4px;
}
.head-form {
  width: 100%;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.head-form .item {
  display: flex;
  margin: 0 10px;
}
.label {
  font-weight: bold;
}
.head-form .item .label::after{
  content: '：';
}
.table {
  border: 2px solid #000;
}
.row {
  display: flex;
  border-bottom: 1px solid #000;
}
.row:last-child {
  border-bottom: none;
}
.cell {
  width: 90px;
  min-height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.cell:before {
  position: absolute;
  top: -1px;
  right: 0;
  content: '';
  height: 106%;
  border-right: 2px solid #000;
}
.cell:last-child:before {
  border: none;
}
.w-1\/2 {
  width: 45px;
}
.w-1\/3 {
  width: 30px;
}
.w-1\/6 {
  width: 15px;
}
.w-1\/2:before,
.w-1\/3:before,
.w-1\/6:before {
  border-right: 1px solid #000;
}
.w-1\/2:nth-child(2n):before,
.w-1\/3:nth-child(3n):before,
.w-1\/6:nth-child(6n):before {
  border-right: 2px solid #000;
}
.w-1\/2:last-child:before,
.w-1\/3:last-child:before,
.w-1\/6:last-child:before {
  border: none;
}
.top {
  line-height: 1;
  align-self: flex-start;
}
.bottom {
  line-height: 1;
  align-self: flex-end;
}
.values {
  display: flex;
}
.values.x-axis {
  flex-direction: column;
}
.up, .down {
  width: 100%;
  display: flex;
  text-align: center;
}
.up {
  border-bottom: 1px solid #000;
}
.up div {
  width: 45px;
  position: relative;
}
.up div:before {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  height: 103%;
  border-right: 1px solid #000;
}
.up div:last-child:before {
  border: none;
}
.up div:nth-child(2n) {
  position: relative;
}
.up div:nth-child(2n):before {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  height: 103%;
  border-right: 2px solid #000;
}
.up div:last-child:before {
  border: none;
}
.down div {
  width: 15px;
  letter-spacing: -1px;
  padding-right: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.down div:before {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  height: 103%;
  border-right: 1px solid #000;
}
.down div:nth-child(6n) {
  position: relative;
}
.down div:nth-child(6n):before {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  height: 103%;
  border-right: 2px solid #000;
}
.down div:last-child:before {
  border: none;
}
.y-axis {
  position: relative;
  justify-content: end;
}
.icons {
  position: absolute;
  bottom: 0;
  left: 0;
}
.icon {
  cursor: pointer;
}
.pulse {
  height: 100%;
  border-right: 1px solid #000;
  text-align: right;
  align-self: start;
  color: red;
  position: relative;
  padding-right: 2px;
}
.temperature {
  width: 30px;
  height: 100%;
  text-align: right;
  align-self: start;
  position: relative;
  padding-right: 2px;
}
.axis-nums {
  position: absolute;
  top: 67.5px;
  height: calc(100% - 135px);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding-right: 2px;
}
.pagination {
  margin-top: 10px;
  text-align: center;
}
[data-tip]:hover {
  transition: .2s;
  cursor: pointer;
}
#tooltip {
  visibility: hidden;
  color: #fff;
  background: #434456;
  padding: 6px 10px;
  transform: translate(-50%, -100%);
  position: absolute;
  z-index: 9999;
  border-radius: 5px;
  pointer-events: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, .6);
  text-align: center;
  white-space: nowrap;
}
#tooltip::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #434456 transparent transparent transparent;
}
text {
  font-size: 12px;
  font-weight: 200;
  stroke: red;
  stroke-width: 0.5;
  writing-mode: tb;
  letter-spacing: 2.9px;
}

</style>
